<template>
  <section class="shenghuohuiEdit">
    <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
      <el-form v-if="!infoLoading" ref="postForm" :model="postForm" :rules="rules" class="form-container">
        <div id="shenghuohuiEditTable">
          提示：填写多人时，用顿号分开，如“赵xx、钱xx”
          <table cellspacing="0" cellpadding="0" class="mytable">
            <tr>
              <th width="100px">会议时间</th>
              <td width="400px">
                <el-form-item prop="shijian">
                  <el-date-picker v-model="postForm.shijian" placeholder="请选择时间" value-format="yyyy-MM-dd" />
                </el-form-item>
              </td>
              <th width="100px">会议地点</th>
              <td width="400px">
                <el-form-item prop="didian">
                  <el-input v-model="postForm.didian" style="width:300px" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>应到人数</th>
              <td>
                <el-form-item prop="yingdaorenshu">
                  <el-input-number v-model="postForm.yingdaorenshu" style="width:100px" :min="0" controls-position="right" />
                </el-form-item>
              </td>
              <th>实到人数</th>
              <td>
                <el-form-item prop="shidaorenshu">
                  <el-input-number v-model="postForm.shidaorenshu" style="width:100px" :min="0" controls-position="right" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>主持人</th>
              <td>
                <el-form-item prop="zhuchiren">
                  <el-input v-model="postForm.zhuchiren" style="width:300px" />
                </el-form-item>
              </td>
              <th>出席人员</th>
              <td>
                <el-form-item prop="chuxirenyuan">
                  <el-input v-model="postForm.chuxirenyuan" style="width:500px" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>列席人员</th>
              <td>
                <el-form-item prop="liexirenyuan">
                  <el-input v-model="postForm.liexirenyuan" style="width:500px" />
                </el-form-item>
              </td>
              <th>缺席人员</th>
              <td>
                <el-form-item prop="quexirenyuan">
                  <el-input v-model="postForm.quexirenyuan" style="width:500px" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>缺席人员提交书面发言材料名单</th>
              <td colspan="3">
                <el-form-item prop="quexishumianmingdan">
                  <el-input v-model="postForm.quexishumianmingdan" style="width:500px" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>会议议程</th>
              <td colspan="3">
                <el-dialog :title="subDialogTitle" :visible.sync="subDialogVisible" width="98%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
                  <div id="shenghuohuiEditTable">
                    <table cellspacing="0" cellpadding="0" class="mytable">
                      <tr>
                        <th>会议议程</th>
                        <td>
                          <el-input  placeholder="请输入会议议程" v-model="wenti" style="width:100%" :maxlength="100" />
                        </td>
                      </tr>
                      <tr>
                        <th></th>
                        <td>
                          <el-button type="primary" @click.native="addWentiSubmit" style="margin:10px 0">{{btnText}}</el-button>
                        </td>
                      </tr>
                    </table>
                  </div>
                </el-dialog>
                <el-button type="success" @click.native="addWenti" style="margin:10px 0">添加一条</el-button> 注：可添加多条
                <el-button type="primary" @click.native="addTemplate" style="margin:10px 0">加载议程模板</el-button> 注：用户可以先加载议程模板，在此基础上修改形成会议议程
                <el-table :data="wentiList" highlight-current-row style="width: 100%;border: 1px solid #74A6CC;border-top: 0;" border>
                  <el-table-column label="" width="160">
                    <template slot-scope="scope">会议议程{{scope.$index+1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="会议议程">
                    <template slot-scope="scope">{{scope.row}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                      <el-button @click="modwenti(scope.$index)" type="primary">修改</el-button>
                      <el-popconfirm title="确定删除该信息吗？" @confirm="delWenti(scope.$index)" style="margin:10px;">
                        <el-button slot="reference" type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </td>
            </tr>
          </table>
          <el-button type="primary" :loading="loading" @click="submitForm">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <div v-if="listLoading" style="margin:20px;">正在加载...</div>
    <div v-else style="margin:10px" id="shenghuohuiEditTable">
      <div style="font-weight:bolder;padding:0 20px 20px 0;">民主生活会会议程序</div>
      <div v-if="tableData&&tableData.length>0">
        <table cellspacing="0" cellpadding="0" class="mytable">
          <tr>
            <th width="100px">会议时间</th>
            <td width="500px">
              {{tableData[0].shijian}}
            </td>
            <th width="100px">会议地点</th>
            <td width="500px">
              {{tableData[0].didian}}
            </td>
          </tr>
          <tr>
            <th>应到人数</th>
            <td>
              {{tableData[0].yingdaorenshu}}
            </td>
            <th>实到人数</th>
            <td>
              {{tableData[0].shidaorenshu}}
            </td>
          </tr>
          <tr>
            <th>主持人</th>
            <td>
              {{tableData[0].zhuchiren}}
            </td>
            <th>出席人员</th>
            <td>
              {{tableData[0].chuxirenyuan}}
            </td>
          </tr>
          <tr>
            <th>列席人员</th>
            <td>
              {{tableData[0].liexirenyuan}}
            </td>
            <th>缺席人员</th>
            <td>
              {{tableData[0].quexirenyuan}}
            </td>
          </tr>
          <tr>
            <th>缺席人员提交书面发言材料名单</th>
            <td colspan="3">
              {{tableData[0].quexishumianmingdan}}
            </td>
          </tr>
        </table>
        <h1>会议议程</h1>
        <table cellspacing="0" cellpadding="0" class="mytable" v-if="tableData[0].yicheng">
          <tr v-for="(item,index) in JSON.parse(tableData[0].yicheng)" :key="'yicheng_'+index">
            <th width="100px">会议议程{{index+1}}</th>
            <td width="1100px">{{item}}</td>
          </tr>
        </table>
        <el-button type="success" @click="modData(tableData[0].id)" icon="el-icon-edit">编辑</el-button>
      </div>
      <div v-else>
        <div style="margin:20px 0;">未填写</div>
        <el-button type="success" @click="addData" icon="el-icon-plus">填写</el-button>
      </div>
    </div>
  </section>
</template>
<script>
const defaultForm = {
  shijian: '',
  didian: '',
  yingdaorenshu: 0,
  shidaorenshu: 0,
  zhuchiren: '',
  chuxirenyuan: '',
  liexirenyuan: '',
  quexirenyuan: '',
  quexishumianmingdan: '',
  id: null
}
export default {
  props: {
    timestamp: ''
  },
  data () {
    const validateRequire = (rule, value, callback) => {
      if (value === null || value === undefined || value === '') {
        callback(new Error('必填项'))
      } else {
        callback()
      }
    }
    return {
      subDialogVisible: false,
      subDialogTitle: '添加批评内容',
      btnText: '添加',
      wenti: '',
      wentiList: [],
      idNumber: '',
      personName: '',
      tableName: 'newHsHuiyiyicheng',
      dialogVisible: false,
      dialogtitle: '填写',
      infoLoading: false,
      postForm: Object.assign({}, defaultForm),
      loading: false,
      rules: {
        shijian: [{ validator: validateRequire }],
        didian: [{ validator: validateRequire }],
        yingdaorenshu: [{ validator: validateRequire }],
        shidaorenshu: [{ validator: validateRequire }],
        zhuchiren: [{ validator: validateRequire }],
        chuxirenyuan: [{ validator: validateRequire }],
        liexirenyuan: [{ validator: validateRequire }]
      },
      tableHeight: 100,
      multipleSelection: [],
      btnLoading: false,
      listLoading: false,
      tableData: []
    }
  },
  watch: {
    timestamp (val) {
      this.getData()
    }
  },
  methods: {
    addWenti () {
      this.subDialogTitle = '添加会议议程'
      this.subDialogVisible = true
      this.wenti = ''
      this.btnText = '添加'
    },
    addTemplate () {
      this.$http
        .get(this.$http.defaults.shenghuohuiAPI + `api/newYichengTemplate/listByYear?year=2023`)
        .then(response => {
          if (response.data.success === true) {
            console.log('加载成功')
            this.wentiList = response.data.result.map(item => item.yicheng)
          } else {
            console.log('加载失败:' + response.data.message)
            this.$message({
              message: '加载失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '加载失败:' + error,
            type: 'error'
          })
        })
    },
    addWentiSubmit () {
      if (this.wenti) {
        if (this.btnText === '添加') {
          this.wentiList.push(this.wenti)
        } else if (this.btnText === '修改') {
          // this.wentiList[this.index] = this.wenti
          this.$set(this.wentiList, this.index, this.wenti)
          this.$forceUpdate()
        }
        this.wenti = ''
        this.btnText = '添加'
        this.subDialogVisible = false
      } else {
        this.$message({
          message: '请输入会议议程',
          type: 'error'
        })
      }
    },
    delWenti (index) {
      this.wentiList.splice(index, 1)
      this.wenti = ''
      this.btnText = '添加'
      this.index = null
    },
    modwenti (index) {
      this.wenti = this.wentiList[index]
      this.btnText = '修改'
      this.subDialogTitle = '修改会议议程'
      this.subDialogVisible = true
      this.index = index
    },
    submitForm () {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          if (!this.wentiList || this.wentiList.length === 0) {
            this.$message({
              message: '会议议程至少有一项',
              type: 'error'
            })
            return false
          }
          this.loading = true
          let para = {
            id: this.postForm.id,
            shenghuohuiunitId: localStorage.getItem('shenghuohuiunitId'),
            shijian: this.postForm.shijian,
            didian: this.postForm.didian,
            yingdaorenshu: this.postForm.yingdaorenshu,
            shidaorenshu: this.postForm.shidaorenshu,
            zhuchiren: this.postForm.zhuchiren,
            chuxirenyuan: this.postForm.chuxirenyuan,
            liexirenyuan: this.postForm.liexirenyuan,
            quexirenyuan: this.postForm.quexirenyuan,
            quexishumianmingdan: this.postForm.quexishumianmingdan,
            yicheng: JSON.stringify(this.wentiList)
          }
          this.$http.post(this.$http.defaults.shenghuohuiAPI + `api/` + this.tableName + `/save`, para).then(response => {
            console.log(response.data.success)
            if (response.data.success === true) {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              if (this.$refs['postForm']) {
                this.$refs['postForm'].resetFields()
              }
              this.dialogVisible = false
              this.loading = false
              this.getData()
            } else {
              console.log('保存失败:' + response.data.message)
              this.$message({
                message: '保存失败:' + response.data.message,
                type: 'error'
              })
              this.loading = false
            }
          }).catch(error => {
            console.log(error)
            this.$message({
              message: '保存失败:' + error,
              type: 'error'
            })
            this.loading = false
          })
        }
      })
    },
    addData () {
      this.dialogtitle = '填写'
      this.dialogVisible = true
      this.postForm = Object.assign({}, defaultForm)
      if (this.$refs['postForm']) {
        this.$refs['postForm'].resetFields()
      }
    },
    modData (id) {
      this.id = id
      this.dialogtitle = '编辑'
      this.dialogVisible = true
      this.infoLoading = true
      this.$http
        .get(this.$http.defaults.shenghuohuiAPI + `api/` + this.tableName + `/getById?id=` + id)
        .then(response => {
          this.infoLoading = false
          if (response.data.success === true) {
            console.log('获取成功')
            this.postForm = Object.assign({}, response.data.result)
            if (this.postForm.yicheng.indexOf('[') === 0) {
              this.wentiList = JSON.parse(this.postForm.yicheng)
            } else {
              this.wentiList.push(this.postForm.yicheng)
            }
          } else {
            console.log('获取数据失败:' + response.data.message)
            this.$message({
              message: '获取数据失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.infoLoading = false
        })
    },
    getData () {
      this.listLoading = true
      let para = {
        shenghuohuiunitId: localStorage.getItem('shenghuohuiunitId'),
        pageNum: 1,
        pageSize: 2000
      }
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .post(this.$http.defaults.shenghuohuiAPI + `api/` + this.tableName + `/queryByPage`, para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            console.log('获取成功')
            this.tableData = response.data.result.records
          } else {
            console.log('获取数据失败:' + response.data.message)
            this.$message({
              message: '获取数据失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 200
      })
    }
  },
  mounted () {
    this.getData()
    this.tableresize(this)
    window.onresize = () => {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      this.tableresize(this)
    }
  }
}
</script>

<style>
  .shenghuohuiEdit .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .shenghuohuiEdit .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  #shenghuohuiEditTable .el-upload--text{
    float:left !important;
  }
  #shenghuohuiEditTable .el-upload__tip{
    float:left !important;
    margin-left:5px;
    margin-top:0 !important;
  }
  #shenghuohuiEditTable .el-upload-list--text{
    padding-top:5px;
    clear: both !important;
  }
  .el-table{
    border-top: 1px solid #95B8E7 !important;
  }
  .el-table--border th, .el-table--border td {
    border-right: 1px solid #95B8E7 !important;
  }
  .el-table th.is-leaf, .el-table td {
    border-bottom: 1px solid #95B8E7 !important;
  }
  #shenghuohuiEditTable .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #shenghuohuiEditTable .mytable th,
  #shenghuohuiEditTable .mytable td{
    height: auto;
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
  }
  #shenghuohuiEditTable .mytable th{
    background:#C0DCF1;
    width:150px;
    vertical-align: middle;
  }
</style>
